<!DOCTYPE html>
<html>
<head>
	<title>商品详情</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/plugins/jquery/jquery.min.js"></script>
	<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="/css/reset.css"/>
	<link rel="stylesheet" href="/css/strategyCatalogs.css"/>
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
	<script src="/js/plugins/dialog2/dialog.min.js"></script>
	<script src="/js/common.js"></script>

	<script type="application/javascript">
		$(function () {
            //获取所有商品
            $.get("/commodities",function (data) {
                //console.log(data);
                $('.commodities').renderValues(data,{
                    getHref:getHref
                });
            })

			//获取商品详情
			var params=getParams();
            if (params.id){
                $.get("/commodities/"+params.id,function (data) {
                    console.log(data);
                    $(".commodityDetail").renderValues(data);
                })
			}

			//收藏点击事件
			$("#collectBtn").click(function () {
				$.post("/goodsCollections/commodity",{"commodity.id":params.id},function (data) {
					if (data.success){
                        $(document).dialog({
                            type : 'notice',
                            infoText: '收藏成功',
                            autoClose: 500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
					}else{
                        $(document).dialog({
                            type : 'notice',
                            infoText: data.msg,
                            autoClose: 500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
					}
                })
            })
        })
	</script>

</head>
<body>
<!--点赞用 隐藏域-->
<input id="likeNumInput" type="hidden"/>
<input type="hidden" id="praise"/>
<div class="search-head">
	<div class="row nav-search">
		<div class="col-2">
			<a href="javascript:history.go(-1);">
				<span><i class="fa fa-chevron-left fa-2x"></i></span>
			</a>
		</div>
	</div>
</div>
<input type="hidden" name="currentPage" id="currentPage" value="1">
<div class="container commodityDetail">
	<img render-src="picture" width="80px"/>
	<h5 class="title" render-html="name"></h5>
	价格:<small render-html="price"></small>积分<br/>
	描述:<small render-html="description"></small><br/>
	分类:<small render-html="commodityCatalog.title"></small><br/>
	<button class="btn btn-success">兑换</button>
	<button class="btn btn-default">
		<small render-html="goodsCollection.collection_number"></small>
		<i class="fa fa-heart">收藏</i>
	</button>
</div>
<!--产品列表-->
<h6>猜你喜欢</h6>
<div class="tab-content" id="pills-tabContent">
	<div class="tab-pane fade active show" id="pills-top">

		<div class="container commodities">
			<div class="row hot" render-loop="list">
				<div class="col-4">
					<a class="commodity" data-href="/mine/commodity.html?id=" render-key="list.id" render-fun="getHref">
						<img render-src="list.picture" width="100%">
						<p render-html="list.name"></p>
						<p class="price"><em render-html="list.price"></em>积分</p>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>